<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>裁剪测试</title>
</head>
<body>


<label class="item_label">
    <div style="width: 200px; height: 200px;border:1px solid #000;">
        <img src="#" id="uploadPreview" style="width: 100%; height: 100%;">
    </div>
    <input type="file" name="file" id="postFile">
    <span id="error_text" style="display: none;">提示</span>
</label>


<div id="result"></div>

<script type="text/javascript">


    function $(Id){
        return document.getElementById(Id);
    }

    var _alertMsg = $('error_text');


    //第一步：获取文件，读取文件并生成url：
    $('postFile').onchange=function(){
        console.log(this.files);

        var val = this.value;

        //设定可上传的格式
        var upLoadType = '.jpg,.gif,.bmp,.png';

        //从字符串中抽出最后一次出现.之后的字符，并且转换成小写
        var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase();

        if (this.files.length === 0) { return; }

        //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.
        var oFile = this.files[0];

        //查找后缀名是否符合条件，如果符合返回>=0，如果不符合则返回负数;
        var result = upLoadType.indexOf(fileExt);
        if (result < 0) {
            _alertMsg.innerHTML = '请输入正确格式:' + upLoadType;
            _alertMsg.style.display = 'inline-block';
        }
        else{
            _alertMsg.innerHTML = '上传成功';
            _alertMsg.style.display = 'inline-block';
        };

        //文件大小
        if (oFile.size / 1024 < 100) {
            _alertMsg.innerHTML = '上传成功';
            _alertMsg.style.display = 'inline-block';
        };

        //读取图片
        var oFReader = new FileReader();

        // 当图像文件加载后,转换成一个data:URL,传递到onload回调函数中
        oFReader.readAsDataURL(oFile);
        oFReader.onload = function (oFREvent) {
            //$("uploadPreview").src = oFREvent.target.result;

            paintImage(oFREvent.target.result);//把预览图片url传给函数
        };
    }


    //第二步：根据容器的大小使用canvas绘制图片：

    function paintImage(url) {


        var t = this;
        var createCanvas = t.getImage.getContext("2d");
        var img = new Image();
        img.src = url;
        img.onload = function(){

            //等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
            //如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放
            //t.imgWidth：绘制后图片的宽度；t.imgHeight：绘制后图片的高度；t.px：绘制后图片的X轴；t.py：绘制后图片的Y轴
            if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
                t.imgWidth = img.width;
                t.imgHeight = img.height;

            } else {
                var pWidth = img.width / (img.height / t.regional.offsetHeight);
                var pHeight = img.height / (img.width / t.regional.offsetWidth);
                t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
                t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
            }
            //图片的坐标
            t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
            t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';

            t.getImage.height = t.imgHeight;
            t.getImage.width = t.imgWidth;
            t.getImage.style.left = t.px;
            t.getImage.style.top = t.py;

            createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小
            t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
            t.cutImage();
            t.drag();
        };
    }


</script>


</body>
</html>